<script setup lang="ts">
import { shallowRef } from 'vue'
import AAAAA from './views/AAAAA.vue'
import BBBBB from './views/BBBBB.vue'
// hash
// location.hash获取与设置相应的hash
// hashchange事件监听
// history
// pushState/replaceState改变url与history
// popstate只监听前进与后退
// location.pathname获取路由的值
const routes = [
  {
    path: '/aaa',
    component: AAAAA
  },
  {
    path: '/bbb',
    component: BBBBB
  }
]
const com = shallowRef()
const push = (str: string) => {
  const findItem = routes.find(item => item.path === str)
  history.pushState({ xxx: 123 }, '', findItem?.path)
  com.value = findItem?.component
  console.log(history)
}
window.addEventListener('popstate', () => {
  console.log(location.pathname)
  const findItem = routes.find(item => item.path === location.pathname)
  com.value = findItem?.component
})
</script>

<template>
  <button @click="push('/aaa')">点击打开aaaa页面</button>
  <button @click="push('/bbb')">点击打开bbbb页面</button>
  <!-- 动态组件 相当于router-view-->
  <component :is="com"></component>
</template>
